@import 'element-plus/theme-chalk/base.css';
@import 'element-plus/theme-chalk/display.css';
@import '../vars.scss';

// element-plus variables
:root {
  // 主题颜色
  --el-color-primary: var(--cjui-color-primary);
  --el-color-primary-light-3: #50ebd6;
  --el-color-primary-light-5: #64eedc;
  --el-color-primary-light-7: #8ff5e8;
  --el-color-primary-light-8: #b4f7ee;
  --el-color-primary-light-9: #dffffb;
  --el-color-primary-dark-2: #1ebba6;
  --el-color-success: #67c23a;
  --el-color-warning: #e6a23c;
  --el-color-danger: #de4b33;
  --el-color-error: #de4b33;

  // 主题颜色 扩展
  --el-color-primary-dark-7: #00564b;
  --el-color-success-dark-7: #3b6e21;
  --el-color-warning-dark-7: #906320;
  --el-color-danger-dark-7: #872213;
  --el-color-info-dark-7: #545150;

  // 颜色
  --el-fill-color-blank: var(--cjui-bg-color-content);

  // 基础设置
  --el-border-radius-base: 2px;
}
// 夜间模式
html.dark {
  --el-text-color-primary: #efefef;
  --el-text-color-regular: #c2c6ce;
  --el-text-color-secondary: #a4a4a4;
  --el-text-color-placeholder: #b6b7ba;
  --el-text-color-disabled: #7f828a;
  --el-box-shadow-lighter: rgba(255, 255, 255, 0.15) 0px 2px 4px;
  --el-border-color-lighter: rgba(158, 158, 158, 0.3);
}

// el-button
.el-button {
  & + .el-button {
    margin-left: var(--sys-body-content-el-margin);
  }
}
html.dark {
  .el-button:not(.is-link) {
    $itemColor: #9c9c9c;
    $itemBgColor: #000;
  
    &, &:hover, &:focus  {
      color: $itemColor;
      background: $itemBgColor;
      border: 1px solid darken($color: $itemColor, $amount: 20%);
      position: relative;
      overflow: hidden;
    }
    &:hover, &:focus {
      box-shadow: 0px 0px 2px 0 darken($color: $itemColor, $amount: 20%);
    }
    &:active {
      color: darken($color: $itemColor, $amount: 20%);
      background: $itemBgColor;
      box-shadow: 0px 0px 4px 1px darken($color: $itemColor, $amount: 20%);
    }
    &:before {
      content: "";
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(120deg, transparent, darken($color: $itemColor, $amount: 20%), transparent);
    }
    &:hover:before, &:active:before, &:focus:before {
      left: 100%;
      transition: all 650ms;
    }
  }
  .el-button--primary:not(.is-link) {
    &, &:hover, &:focus  {
      color: var(--el-color-primary);
      background: #050d1a;
      border-color: var(--el-color-primary-dark-7);
    }
    &:hover, &:focus {
      box-shadow: 0px 0px 2px 0 var(--el-color-primary-dark-7);
    }
    &:active {
      color: var(--el-color-primary-dark-7);
      background: #050d1a;
      box-shadow: 0px 0px 4px 1px var(--el-color-primary-dark-7);
    }
    &:before {
      background: linear-gradient(120deg, transparent, var(--el-color-primary-dark-7), transparent);
    }
  }
  .el-button--success:not(.is-link) {
    &, &:hover, &:focus  {
      color: var(--el-color-success);
      background: #050d1a;
      border-color: var(--el-color-success-dark-7);
    }
    &:hover, &:focus {
      box-shadow: 0px 0px 2px 0 var(--el-color-success-dark-7);
    }
    &:active {
      color: var(--el-color-success-dark-7);
      background: #050d1a;
      box-shadow: 0px 0px 4px 1px var(--el-color-success-dark-7);
    }
    &:before {
      background: linear-gradient(120deg, transparent, var(--el-color-success-dark-7), transparent);
    }
  }
  .el-button--warning:not(.is-link) {
    &, &:hover, &:focus  {
      color: var(--el-color-warning);
      background: #050d1a;
      border-color: var(--el-color-warning-dark-7);
    }
    &:hover, &:focus {
      box-shadow: 0px 0px 2px 0 var(--el-color-warning-dark-7);
    }
    &:active {
      color: var(--el-color-warning-dark-7);
      background: #050d1a;
      box-shadow: 0px 0px 4px 1px var(--el-color-warning-dark-7);
    }
    &:before {
      background: linear-gradient(120deg, transparent, var(--el-color-warning-dark-7), transparent);
    }
  }
  .el-button--danger:not(.is-link) {
    &, &:hover, &:focus  {
      color: var(--el-color-danger);
      background: #050d1a;
      border-color: var(--el-color-danger-dark-7);
    }
    &:hover, &:focus {
      box-shadow: 0px 0px 2px 0 var(--el-color-danger-dark-7);
    }
    &:active {
      color: var(--el-color-danger-dark-7);
      background: #050d1a;
      box-shadow: 0px 0px 4px 1px var(--el-color-danger-dark-7);
    }
    &:before {
      background: linear-gradient(120deg, transparent, var(--el-color-danger-dark-7), transparent);
    }
  }
  .el-button--info:not(.is-link) {
    &, &:hover, &:focus  {
      color: var(--el-color-info);
      background: #050d1a;
      border-color: var(--el-color-info-dark-7);
    }
    &:hover, &:focus {
      box-shadow: 0px 0px 2px 0 var(--el-color-info-dark-7);
    }
    &:active {
      color: var(--el-color-info-dark-7);
      background: #050d1a;
      box-shadow: 0px 0px 4px 1px var(--el-color-info-dark-7);
    }
    &:before {
      background: linear-gradient(120deg, transparent, var(--el-color-info-dark-7), transparent);
    }
  }
}

// el-input + el-textarea + el-input-number
.el-textarea__inner {
  resize: none;
}
html.dark {
  .el-input,
  .el-textarea {
    --el-input-bg-color: transparent;
    --el-disabled-bg-color: var(--el-border-color);
    --el-disabled-border-color: var(--el-border-color);
    --el-select-disabled-border: var(--el-border-color);
  }

  .el-input-number {
    .el-input-number__decrease,
    .el-input-number__increase {
      background: var(--cjui-bg-color);
      border-color: var(--el-border-color);
    }
  }
}

// el-select
html.dark {
  .el-select__popper.el-popper[role='tooltip'][data-popper-placement^='bottom'] {
    background: var(--cjui-bg-color-content);
    border: 1px solid var(--el-border-color);

    .el-popper__arrow::before {
      background: var(--el-color-primary);
    }
    .el-select-dropdown__item.hover,
    .el-select-dropdown__item:hover {
      background-color: var(--cjui-bg-color-content-hover);
    }
    .el-select-dropdown__item.selected {
      color: var(--el-color-primary);
    }
  }
}

// el-tabs
.el-tabs {
  &.el-tabs--card {
    --el-tabs-header-height: 48px;

    .el-tabs__header .el-tabs__nav {
      border: 0;
    }
    .el-tabs__header .el-tabs__item {
      color: var(--el-text-color-secondary);
      border-left: 0;
      padding: 0 28px;
    }
    .el-tabs__header .el-tabs__item.is-active {
      color: var(--el-color-primary);
      border-bottom-color: var(--el-color-primary);
      border-bottom-width: 2px;
    }
  }

  &.el-tabs--border-card {
    & > .el-tabs__header .el-tabs__item:hover,
    & > .el-tabs__header .el-tabs__item:not(.is-disabled):hover,
    & > .el-tabs__header .el-tabs__item.is-active,
    & > .el-tabs__header .el-tabs__item.is-active:hover {
      color: var(--el-text-color-secondary);
    }
  }
}
html.dark {
  --el-bg-color: #020811;
  --el-border-color: rgba(28, 117, 126, 0.2);
  --el-border-color-light: rgba(61, 195, 210, 0.1);

  .el-tabs--border-card {
    background: transparent;

    & > .el-tabs__header {
      background-color: #162232;
    }
    & > .el-tabs__header .el-tabs__item.is-active {
      background: linear-gradient(0deg, #172837 40%, #0e1928);
      border-bottom: 1px solid #172837;
    }
  }
}

// el-card
html.dark {
  .el-card {
    --el-card-bg-color: #060921;
  }
}

// el-radio
html.dark {
  .el-radio {
    --el-radio-input-border: 1px solid var(--el-color-primary-dark-2);
    --el-radio-input-bg-color: #0e1928;
  }
}

// el-checkbox
html.dark {
  .el-checkbox {
    --el-checkbox-bg-color: transparent;
    --el-checkbox-input-border: var(--el-border-width) var(--el-border-style) var(--el-border-color);
  }
}

// el-table
.el-table {
  --el-table-header-bg-color: var(--cjui-comps-table-header-bg-color);
}
html.dark {
  &.el-table--border {
    --el-table-border-color: var(--el-border-color);

    tr,
    th {
      background: var(--cjui-bg-color-content);
    }

    td {
      background: transparent;
    }

    .el-table__body tr:hover > td,
    .el-table__body tr.hover-row > td.el-table__cell {
      background-color: var(--cjui-bg-color-content);
    }
  }
}

// el-pagination
.el-pagination {
  &.is-background {
    --el-pagination-button-bg-color: transparent;
    --el-disabled-bg-color: transparent;
  }
}

// el-tree
.el-tree {
  background: transparent;

  .el-tree-node__content {
    height: 39px;
    border-bottom: 1px solid var(--el-border-color-lighter);

    &:hover {
      color: var(--el-color-primary);
    }
  }
  .el-tree-node.is-active > .el-tree-node__content {
    color: var(--el-color-primary);
  }
}

// el-dialog
.el-dialog {
  --el-dialog-border-radius: 4px;
  --el-dialog-title-font-size: 16px;
  --el-dialog-padding-primary: 16px;

  &.is-fullscreen {
    border-radius: 0;
  }

  .el-dialog__header {
    padding: 20px var(--el-dialog-padding-primary);
    margin-right: 0;
    font-weight: 600;
    border-bottom: 1px solid var(--el-border-color-lighter);
  }

  .el-dialog__headerbtn {
    top: 10px;
  }

  .el-dialog__close {
    font-size: 18px;
  }

  .el-dialog__footer {
    padding: var(--el-dialog-padding-primary);
    border-top: 1px solid var(--el-border-color-lighter);
  }
}
html.dark {
  .el-dialog {
    background: var(--cjui-bg-color);
    box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.1);
  }
}

// el-drawer
.el-drawer {
  max-width: 80vw;
  background: var(--cjui-bg-color-content);
  
  .el-drawer__header {
    padding: 15px 20px 12px;
    margin-bottom: 0;
  }

  .el-drawer__title {
    font-size: 14px;
    font-weight: bold;
    color: var(--el-text-color-primary);
  }

  .el-drawer__close-btn .el-drawer__close {
    color: var(--el-text-color-placeholder);
  }

  .el-drawer__footer {
    padding: 12px 20px 15px;
  }
}

// el-popper
.el-popper {
  --el-popper-border-radius: 2px;
}

// el-message-box
.el-message-box {
  padding: 0;

  .el-message-box__header {
    padding: 16px 16px 8px;
  }
  .el-message-box__title {
    font-size: 16px;
    font-weight: 600;
  }
  .el-message-box__headerbtn {
    font-size: 18px;
    height: 56px;
  }
  .el-message-box__content {
    padding: 16px;
  }
  .el-message-box__status {
    font-size: 20px;
  }
  .el-message-box__btns {
    padding: 8px 16px 16px;
  }
}
html.dark {
  .el-message-box {
    background: var(--cjui-bg-color);
  }
}

// el-notification，需要添加对应的自定义样式
.el-notification {
  --el-notification-radius: 4px;
  --el-notification-padding: 14px 16px 14px 16px;
  --el-notification-border-color: 0;

  .el-notification--success,
  .el-notification--warning,
  .el-notification--error,
  .el-notification--info {
    --el-notification-icon-color: #f9f9f9;
  }

  .el-notification__content {
    --el-notification-content-color: #f9f9f9;
  }

  .el-notification__closeBtn {
    --el-notification-close-color: #eee;
    --el-notification-close-hover-color: #f9f9f9;
  }

  &.is-success {
    background-image: var(--cjui-color-green-grad);
  }

  &.is-warning {
    background-image: var(--cjui-color-yellow-grad-light);
  }

  &.is-error {
    background-image: var(--cjui-color-red-grad-light);
  }

  &.is-info {
    background-color: var(--el-color-info);
  }
}

// el-loading
.el-loading-mask {
  background-color: var(--cjui-loading-modal-color);
}

// el-breadcrumb
.el-breadcrumb {
  .el-breadcrumb__inner.is-link {
    color: var(--el-text-color-regular);
    font-weight: 500;
  }

  .el-breadcrumb__item:last-child .el-breadcrumb__inner {
    color: var(--el-text-color-primary);
  }
}

// el-descriptions
.el-descriptions {
  .el-descriptions__body {
    background: var(--cjui-bg-color-content);
  }

  .el-descriptions__label.el-descriptions__cell.is-bordered-label {
    font-weight: normal;
    background: var(--cjui-bg-color);
    border: 1px solid var(--el-border-color);
  }

  .el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions__cell {
    border: 1px solid var(--el-border-color);
  }
}
